<template>
  <div class="order components-container">
    <!-- ========头部======-->
    <el-form  :inline="true" :model="list" class="demo-form-inline">
      <el-row>
        <el-col :span="22">
          <el-form-item label="汽车品牌">
            <el-input v-model="list.brandName" placeholder="请输入汽车品牌" clearable></el-input>
          </el-form-item>

          <el-form-item label="经手销售">
            <el-input v-model="list.saleName" placeholder="请输入经手销售" clearable></el-input>
          </el-form-item>

          <el-form-item label="经纪人">
            <el-input v-model="list.brokerName" placeholder="请输入经纪人" clearable></el-input>
          </el-form-item>

          <el-form-item label="状态" prop="placeArea">
            <el-select v-model="list.status" placeholder="请选择" clearable style="width: 100%;">
              <el-option
                v-for="(item, index) in orderStatus"
                :key="index"
                :label="item.valueName"
                :value="item.keyName">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search()" size="medium" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-col :span="24" style="text-align:right;" class="tableEvent">
      <el-button type="primary" size="medium" icon="el-icon-plus" @click="openBox('add')">导出</el-button>
    </el-col> -->

    <!-- ========表格======-->
    <template>
      <el-table
        v-loading="loading"
        :data="tableData"
        class="fns-table"
        border
        style="width: 100%">
        <el-table-column
          prop="brandName"
          label="汽车品牌"
          width="120"
          align="center">
        </el-table-column>
        <el-table-column
          prop="modelName"
          label="型号规格"
          align="center ">
        </el-table-column>
        <el-table-column
          prop="brokerName"
          label="经纪人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="saleName"
          label="经手销售"
          align="center">
        </el-table-column>
        <el-table-column
          prop="orderTotalNumber"
          label="订单台数"
          align="center">
        </el-table-column>
        <el-table-column
          prop="totalOrderPrice"
          label="总价（万元）"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          :formatter="formatterStatus">
        </el-table-column>
        <el-table-column
          prop="updatedOn"
          label="修改时间"
          width="160"
          align="center">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <a v-if="!(scope.row.status === 'DEPOSIT_REJECT' || scope.row.status === 'BALANCE_WAIT_PAY' || scope.row.status === 'BALANCE_REJECT' ||
          scope.row.status === 'FULL_REJECT' || scope.row.status === 'LICENSE_WAIT_UPLOAD' || scope.row.status === 'LICENSE_REJECT' || scope.row.status === 'COMPLETED' || scope.row.status === 'CANCELED')">
              <el-tooltip v-if="scope.row.status === 'CUSTOMER_WAIT_FIRST_AUDIT'" content="初审客户" placement="top" v-show="btnShow('初审客户')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'CUSTOMER_WAIT_FINAL_AUDIT'" content="终审客户" placement="top" v-show="btnShow('终审客户')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'DEPOSIT_WAIT_PAY' || scope.row.status === 'FULL_WAIT_PAY'" content="递交合同" placement="top" v-show="btnShow('递交合同')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'DEPOSIT_WAIT_AUDIT'" content="审核定金" placement="top" v-show="btnShow('审核定金')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'BALANCE_WAIT_AUDIT'" content="审核尾款" placement="top" v-show="btnShow('审核尾款')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'BALANCE_PAID' || scope.row.status === 'FULL_PAID'" content="确认取车" placement="top" v-show="btnShow('确认取车')">
                <a  @click="openUpdateBox(scope.row, 'confirm')" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>
              <el-tooltip v-if="scope.row.status === 'BALANCE_PAID' || scope.row.status === 'FULL_PAID'" content="更换车辆" placement="top" v-show="btnShow('更换车辆')">
                <a  @click="openUpdateBox(scope.row, 'out')" style="padding-left: 5px;">
                  <i class="el-icon-edit"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'FULL_WAIT_AUDIT'" content="审核全款" placement="top" v-show="btnShow('审核全款')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'INVOICE_WAIT' || scope.row.status === 'INVOICE_REJECT'" content="申请开票" placement="top" v-show="btnShow('申请开票')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'INVOICE_WAIT_AUDIT'" content="审核开票" placement="top" v-show="btnShow('审核开票')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'INVOICE_PASS'" content="递交发票" placement="top" v-show="btnShow('递交发票')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'LICENSE_WAIT_AUDIT'" content="审核上牌" placement="top" v-show="btnShow('审核上牌')">
                <a  @click="openUpdateBox(scope.row, scope.$index)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'DELIVERY_WAIT' && +scope.row.saleType === 0" content="归还资料" placement="top" v-show="btnShow('归还资料')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit-outline"></i>
                </a>
              </el-tooltip>

              <el-tooltip v-if="scope.row.status === 'DELIVERY_WAIT' && +scope.row.saleType === 1" content="归还保证金" placement="top" v-show="btnShow('归还保证金')">
                <a  @click="openUpdateBox(scope.row)" style="padding-left: 5px;">
                  <i class="el-icon-edit"></i>
                </a>
              </el-tooltip>

            </a>

            <el-tooltip content="查看详情" placement="top" v-show="btnShow('查看详情')">
              <a @click="edit(scope.row)" style="padding-left: 5px;">
                <i class="el-icon-view"></i>
              </a>
            </el-tooltip>
            <el-tooltip content="归档资料" placement="top" v-show="btnShow('归档资料')">
              <a @click="material(scope.row)" style="padding-left: 5px;">
                <i class="el-icon-document"></i>
              </a>
            </el-tooltip>
            <el-tooltip content="取消订单" placement="top" v-show="btnShow('取消订单')">
              <a v-if="!(scope.row.status == 'INVOICE_WAIT' || scope.row.status == 'INVOICE_WAIT_AUDIT' || scope.row.status == 'INVOICE_REJECT' || scope.row.status == 'INVOICE_PASS' || scope.row.status == 'LICENSE_WAIT_UPLOAD' || scope.row.status == 'LICENSE_WAIT_AUDIT' || scope.row.status == 'LICENSE_REJECT' || scope.row.status == 'DELIVERY_WAIT' || scope.row.status == 'COMPLETED' || scope.row.status == 'CANCELED')" @click="cancelOrder(scope.$index, scope.row.id)" style="padding-left: 5px;">
                <i class="el-icon-close"></i>
              </a>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- ========页码======-->
    <pages v-on:_pageChange="_pageChange" :total="total"></pages>

    <!-- ========弹窗======-->
   <div>
     <updateModal :updateMsg="updateMsg" v-on:queryList="queryList"></updateModal>
   </div>
   <!-- ========查看订单弹窗======-->
   <el-dialog
        title="查看订单"
        :visible.sync="editVisible"
        width="1000px"
        :close-on-click-modal="false"
        :before-close="handleClose1">
        <el-form label-width="140px" v-model="formEdit">
          <!-- <el-form-item style="text-align:right;">
            <el-button type="primary" @click="orderExport(scope.row)" size="small">导出客户与车辆信息</el-button>
          </el-form-item> -->
          <div>
          <el-tabs tab-position="left" @tab-click="handleClick">
            <!-- 客户信息 -->
            <div style="float:left;">
              <el-tab-pane label="客户信息" v-if='this.customerType==1'>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="公司名称：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].customerName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="税号：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].creditCode}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="开户行：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].bankOfDeposit}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="账号：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].account}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="公司电话：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].customerPhone}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="公司地址：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].customerAddress}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="营业执照：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">
                        <a :href="imgUrl + goodsOrderCustomerEntityList[0].billingInformationUrl" target="_blank">
                          {{goodsOrderCustomerEntityList[0].billingInformationUrl.substr(goodsOrderCustomerEntityList[0].billingInformationUrl.length - 16)}}
                        </a>
                      </div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="公司开票资料：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].billingInformationUrl}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- <el-row :gutter="20" v-if='customerType==2'>
                  <el-col :span="12">
                    <el-form-item label="个人姓名：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].customerName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="个人电话：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].customerPhone}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="身份证号：">
                      <div v-if="goodsOrderCustomerEntityList.length!=0">{{goodsOrderCustomerEntityList[0].customerIdCard}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证正面：">
                      <a :href="imgUrl + goodsOrderCustomerEntityList[0].customerFrontUrl" target="_blank">
                        {{goodsOrderCustomerEntityList[0].customerFrontUrl.substr(goodsOrderCustomerEntityList[0].customerFrontUrl.length - 16)}}
                      </a>
                    </el-form-item>
                  </el-col>
                </el-row> -->
              </el-tab-pane>
            </div>
            <div>
            <el-tab-pane label="客户信息" v-if='this.customerType==2'>
              <template v-for="item in goodsOrderCustomerEntityList">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="个人姓名：">
                      <div>{{item.customerName}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="个人电话：">
                      <div>{{item.customerPhone}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="身份证号：">
                      <div>{{item.customerIdCard}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="身份证正面：">
                      <a :href="imgUrl + item.customerFrontUrl" target="_blank">
                        {{item.customerFrontUrl.substr(item.customerFrontUrl.length - 16)}}
                      </a>
                    </el-form-item>
                  </el-col>
                </el-row>
              </template>
            </el-tab-pane>
            </div>
            <!-- 车辆信息 -->
            <div>
            <el-tab-pane label="车辆信息">
              <el-row :gutter="20">
                <el-col :span="1">
                  <el-form-item></el-form-item>
                </el-col>
                <el-col :span="22">
                  <template>
                    <el-table v-loading="loading" class="brandTable" :data="formData1" border width="100%">
                      <el-table-column prop="brandName" align="center" label="汽车品牌"></el-table-column>
                      <el-table-column prop="modelName" align="center" label="型号规格"></el-table-column>
                      <el-table-column prop="extcolor" align="center" label="外观颜色"></el-table-column>
                      <el-table-column prop="nercolor" align="center" label="内饰颜色"></el-table-column>
                      <el-table-column prop="vinCode" align="center" label="VIN码"></el-table-column>
                    </el-table>
                  </template>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="订单台数：">
                    <div>{{orderTotalNumber}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="单价 ( 万元 )：">
                    <div>{{commodityUnitPrice}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="总价 ( 万元 )：">
                    <div>{{totalOrderPrice}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            </div>
            <!-- 合同快递信息 -->
            <div>
            <el-tab-pane label="合同快递信息">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="邮寄快递单号：">
                    <div>{{contractMailCode}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="回寄快递单号：">
                    <div>{{contractBackCode}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            </div>
            <!-- 款项信息 -->
            <div>
            <el-tab-pane label="款项信息">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="订单全款 ( 万元 )：">
                    <div>{{totalOrderPrice}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="保证金 ( 万元 )：">
                    <div>{{commodityGuaranteeAmount}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="定金金额 ( 万元 )：">
                    <div>{{commodityDepositAmount}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尾款金额 ( 万元 )：">
                    <div>{{balanceAmount}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="保证金及定金回执：">
                    <div v-for="(item,index) in commodityDepositImageList" :index="index">
                        <!--{{item.id}}+{{item.url}}-->
                      <div>
                        <a :href="imgUrl + item.url" target="_blank">
                          {{item.url.substr(item.url.length - 16)}}
                        </a>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="尾款回执：">
                    <div v-for="(item,index) in balanceImageList" :key="index">
                      <div>
                        <a :href="imgUrl + item.url" target="_blank">
                          {{item.url.substr(item.url.length - 16)}}
                        </a>
                      </div>
                      <!--{{item.id}}+{{item.url}}-->
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            </div>
            <!-- 验车信息 -->
            <div>
            <el-tab-pane label="验车信息">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="验车时间：">
                    <div v-if="this.goodsOrderCarValidateEntity!=null">{{goodsOrderCarValidateEntity.validDate}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="验车人姓名：">
                    <div v-if="this.goodsOrderCarValidateEntity!=null">{{goodsOrderCarValidateEntity.validCarName}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="验车人电话：">
                    <div v-if="this.goodsOrderCarValidateEntity!=null">{{goodsOrderCarValidateEntity.phone}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="验车人身份证：">
                    <div v-if="this.goodsOrderCarValidateEntity!=null">{{goodsOrderCarValidateEntity.idCard}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="身份证正面：">
                    <a :href="imgUrl + goodsOrderCarValidateEntity.idCardFrontUrl" target="_blank" v-if="this.goodsOrderCarValidateEntity!=null">
                      {{goodsOrderCarValidateEntity.idCardFrontUrl}}
                    </a>
                    <!--<img :src="goodsOrderCarValidateEntity.idCardFrontUrl" alt="" v-if="this.goodsOrderCarValidateEntity!=null">-->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            </div>
            <!-- 发票与合格证 -->
            <div>
            <el-tab-pane label="发票与合格证">
              <template  v-for="item in invoiceInfoList">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="发票号码：">
                      <div>{{item.invoiceNo}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="发票照片：">
                      <a :href="imgUrl + item.invoiceImage" target="_blank">
                        {{item.invoiceImage.substr(item.invoiceImage.length - 16)}}
                      </a>
                    </el-form-item>
                  </el-col>
                </el-row>
                </template>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="递交方式：">
                      <div>{{invoiceMailWay == 0?'快递': invoiceMailWay == 1?'其他方式':''}}</div>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="邮寄快递单号：" v-show="invoiceMailWay == 0">
                      <div>{{invoiceMailCode}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
            </el-tab-pane>
            </div>
            <!-- 上牌信息 -->
            <div>
            <el-tab-pane label="上牌信息">
              <template>
                <el-table v-loading="loading" class="brandTable" :data="formData" border style="width: 100%">
                  <el-table-column prop="vinCode" align="center" label="VIN码"></el-table-column>
                  <el-table-column prop="drivingUrl" align="center" label="行驶证"></el-table-column>
                  <el-table-column prop="registrationUrl" align="center" label="登记证"></el-table-column>
                  <el-table-column prop="trafficInsurancePolicyUrl" align="center" label="交强险保单"></el-table-column>
                </el-table>
              </template>
            </el-tab-pane>
            </div>
            <!-- 待归还剩余资料 -->
            <div>
            <el-tab-pane label="归还资料" v-if="saleType == 0">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="归还方式：">
                    <!-- <div>{{datumMailWay}}</div> -->
                    <div>{{datumMailWay == 0?'快递': invoiceMailWay == 1?'其他方式':''}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="回寄快递单号：" v-if="datumMailWay == 0">
                    <div>{{contractBackCode}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            </div>
            <!-- 待归还保证金 -->
            <div>
            <el-tab-pane label="归还保证金" v-if="saleType == 1">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="可退还日期：">
                    <div>{{guaranteeAmountReturnTime}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="保证金 ( 万元 )：">
                    <div>{{commodityGuaranteeAmount}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="保证金转账回执：">
                    <div v-for="(item,index) in guaranteeAmountImageList" :key="index">
                      <!--<div style="width: 60px;">-->
                        <!--<img :src="imgUrl + item.url" alt="图片" width="100%">-->
                      <!--</div>-->
                      <a :href="imgUrl + item.url" target="_blank">
                        {{item.url.substr(item.url.length - 16)}}
                      </a>
                    </div>
                    <!-- <div v-for="(item,index) in balanceImageList" :key="index">
                      {{item.id}}+{{item.url}}
                    </div> -->
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            </div>
          </el-tabs>
          </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <!-- <el-button @click="editVisible = false">取 消</el-button> -->
          <el-button type="primary" @click="orderExport">导出客户与车辆信息</el-button>
        </span>
    </el-dialog>
    <!-- ========归档资料弹窗======-->
   <el-dialog
        title="归档资料"
        :visible.sync="fileVisible"
        class="fns-el-dialog"
        width="900px"
        :close-on-click-modal="false"
        :before-close="handleClose">
     <el-form label-width="160px" :model="formAdd">
       <el-row>
         <el-col :span="11">
           <el-form-item label="合同电子版：">
             <div v-if="formAdd.contractUrl.length === 0 || formAdd.contractUrl[0].url === ''">
               <el-upload
                 ref="upload1"
                 :show-file-list="showFileList"
                 class="upload-demo"
                 :action="action"
                 :headers="{token: tokenImg}"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-upload="beforeUpload"
                 :on-success="upFileSuccess1"
                 :on-error="upFileError"
                 :limit="limit"
                 list-type="picture">
                 <el-button size="small" type="primary">上传附件</el-button>
                 <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
               </el-upload>
             </div>
             <div v-else>
               <div v-for="item in formAdd.contractUrl" :key="item.id">
                 <el-col :span="18" style="padding-left: 0;">
                   <a :href="imgUrl + item.url" target="_blank">{{ item.url.substr(item.url.length - 16) }}</a>
                 </el-col>
                 <el-col :span="6" style="text-align: right;">
                   <el-button @click='handleRemoveImg(item.id, "contractUrl")' type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                 </el-col>
               </div>
             </div>
           </el-form-item>
         </el-col>

         <el-col :span="11" :offset="1">
           <el-form-item label="车辆采购订单电子版：">
             <div v-if="formAdd.vehicleProcurementUrl.length === 0 || formAdd.vehicleProcurementUrl[0].url === ''">
               <el-upload
                 class="upload-demo"
                 :action="action"
                 ref="upload2"
                 :show-file-list="showFileList"
                 :headers="{token: tokenImg}"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-upload="beforeUpload"
                 :on-success="upFileSuccess2"
                 :on-error="upFileError"
                 :limit="limit"
                 list-type="picture">
                 <el-button size="small" type="primary">上传附件</el-button>
                 <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
               </el-upload>
             </div>
             <div v-else>
               <div v-for="item in formAdd.vehicleProcurementUrl" :key="item.id">
                 <el-col :span="18" style="padding-left: 0;">
                   <a :href="imgUrl + item.url" v-for="item in formAdd.vehicleProcurementUrl" :key="item.id" target="_blank">{{ item.url.substr(item.url.length - 16) }}</a>
                 </el-col>
                 <el-col :span="6" style="text-align: right;">
                   <el-button @click='handleRemoveImg(item.id, "vehicleProcurementUrl")' type="danger" icon="el-icon-delete" circle size="mini"></el-button>
                 </el-col>
               </div>
             </div>
           </el-form-item>
         </el-col>
       </el-row>

       <el-row>
         <el-col :span="11">
           <el-form-item label="车辆确认书电子版：">
             <div v-if="formAdd.vehicleConfirmationUrl.length === 0 || formAdd.vehicleConfirmationUrl[0].url === ''">
               <el-upload
                 class="upload-demo"
                 ref="upload3"
                 :show-file-list="showFileList"
                 :action="action"
                 :headers="{token: tokenImg}"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-upload="beforeUpload"
                 :on-success="upFileSuccess3"
                 :on-error="upFileError"
                 :limit="limit"
                 list-type="picture">
                 <el-button size="small" type="primary">上传附件</el-button>
                 <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
               </el-upload>
             </div>
             <div v-else>
               <el-col :span="18" style="padding-left: 0;">
                 <a :href="imgUrl + item.url" v-for="item in formAdd.vehicleConfirmationUrl" target="_blank" :key="item.id">{{ item.url.substr(item.url.length - 16) }}</a>
               </el-col>
               <el-col :span="6" style="text-align: right;">
                 <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
               </el-col>
             </div>
           </el-form-item>
         </el-col>

         <el-col :span="11" :offset="1">
           <el-form-item label="待付款证明电子版：">
             <div v-if="formAdd.agentPayUrl.length === 0 || formAdd.agentPayUrl[0].url === ''">
               <el-upload
                 class="upload-demo"
                 :action="action"
                 ref="upload4"
                 :show-file-list="showFileList"
                 :headers="{token: tokenImg}"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 :before-upload="beforeUpload"
                 :on-success="upFileSuccess4"
                 :on-error="upFileError"
                 :limit="limit"
                 list-type="picture">
                 <el-button size="small" type="primary">上传附件</el-button>
                 <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
               </el-upload>
             </div>
             <div v-else>
               <el-col :span="18" style="padding-left: 0;">
                 <a :href="imgUrl + item.url" v-for="item in formAdd.agentPayUrl" target="_blank" :key="item.id">{{ item.url.substr(item.url.length - 16) }}</a>
               </el-col>
               <el-col :span="6" style="text-align: right;">
                 <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
               </el-col>
             </div>
           </el-form-item>
         </el-col>
       </el-row>

      <!-- //  修改==================================================================-->
       <div v-if="formAdd.goodsOrderInvoiceExtendEntityList.length === 0">
         <!--// 发票数量 单选-->
         <el-row>
           <el-form-item label="发票数量：">
             <el-radio-group v-model="formAdd.orderTotalNumber" v-if="formAdd.vinList.length <= 1">
               <el-radio :label="1">1张</el-radio>
               <el-radio :label="2" disabled>多张</el-radio>
             </el-radio-group>
             <el-radio-group v-model="formAdd.orderTotalNumber" v-else>
               <el-radio :label="1">1张</el-radio>
               <el-radio :label="2">多张</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-row>

         <!--一张发票及图片-->
         <div v-if="formAdd.orderTotalNumber === 1">
           <el-row>
             <el-col :span="12">
               <el-form-item label="发票号码：">
                 <el-input v-model="formAddData.goodsOrderInvoiceExtendEntityList[0].invoiceNo" :maxlength="length"></el-input>
               </el-form-item>
             </el-col>
           </el-row>

           <el-row>
             <el-col :span="12">
               <el-form-item label="发票照片：">
                 <div v-if="formAdd.goodsOrderInvoiceExtendEntityList.length === 0">
                   <el-upload
                     class="upload-demo"
                     ref="uploadOne"
                     :show-file-list="showFileList"
                     :action="action"
                     :headers="{token: tokenImg}"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :before-upload="beforeUpload"
                     :on-success="upFileOneSuccess"
                     :on-error="upFileError"
                     :limit="limit"
                     list-type="picture">
                     <el-button size="small" type="primary">上传附件</el-button>
                     <span slot="tip" class="el-upload__tip" style="padding-left: 20px;color: #999;">附件不能超过5M</span>
                   </el-upload>
                 </div>
                 <div v-else>
                   <el-col :span="18" style="padding-left: 0;">
                     <a :href="imgUrl + item.invoiceImage" v-for="item in formAdd.goodsOrderInvoiceExtendEntityList" target="_blank" :key="item.id">{{ item.invoiceImage.substr(item.invoiceImage.length - 16) }}</a>
                   </el-col>
                 </div>
               </el-form-item>
             </el-col>
           </el-row>
         </div>

         <!--多张发票及图片-->
         <el-row v-if="formAdd.orderTotalNumber === 2">
           <el-col :span="5">
             <el-form-item label="">
             </el-form-item>
           </el-col>

           <el-col :span="18">
             <template>
               <el-table v-loading="loading" class="brandTable" :data="invoiceData" border style="width: 100%" key="modify-table">
                 <el-table-column prop="vin" align="center" label="VIN码"></el-table-column>
                 <el-table-column prop="invoiceNo" align="center" label="发票号码">
                   <template slot-scope="scope">
                     <el-input v-model="scope.row.invoiceNo" placeholder="请输入发票号码" clearable :maxlength="length"></el-input>
                   </template>
                 </el-table-column>
                 <el-table-column prop="invoiceImage" align="center" label="发票照片">
                   <template slot-scope="scope">
                     <div @click="submitUploadTable(scope.$index)">
                       <el-upload
                         class="upload-demo"
                         ref="uploadMore"
                         :show-file-list="showFileList"
                         :action="action"
                         :headers="{token: tokenImg}"
                         :on-preview="handlePreview"
                         :on-remove="handleRemove"
                         :on-success="upFileMoreSuccess"
                         :before-upload="beforeUpload"
                         :file-list="fileList"
                         :limit="limit">
                         <el-button slot="trigger" size="small" type="primary">添加附件</el-button>
                         <span slot="tip" class="el-upload__tip" style="padding-left: 5px;color: #999;">附件不能超过5M</span>
                       </el-upload>
                     </div>
                     <div v-show="0 ===1">
                       <el-input v-model="scope.row.invoiceImage"></el-input>
                     </div>
                   </template>
                 </el-table-column>
               </el-table>
             </template>
           </el-col>
         </el-row>
       </div>

       <!-- //  查看==================================================================-->
       <div v-else>
         <!--一张发票及图片-->
         <div v-if="formAdd.goodsOrderInvoiceExtendEntityList.length === 1">
           <el-row>
             <el-col :span="12">
               <el-form-item label="发票号码：">
                 <el-input v-model="formAdd.goodsOrderInvoiceExtendEntityList[0].invoiceNo" disabled></el-input>
               </el-form-item>
             </el-col>
           </el-row>

           <el-row>
             <el-col :span="12">
               <el-form-item label="发票照片：">
                 <div>
                   <el-col :span="18" style="padding-left: 0;">
                     <a :href="imgUrl + item.invoiceImage" v-for="item in formAdd.goodsOrderInvoiceExtendEntityList" target="_blank" :key="item.id">{{ item.invoiceImage.substr(item.invoiceImage.length - 16) }}</a>
                   </el-col>
                 </div>
               </el-form-item>
             </el-col>
           </el-row>
         </div>

         <!--多张发票及图片-->
         <el-row v-if="formAdd.goodsOrderInvoiceExtendEntityList.length > 1">
           <el-col :span="5">
             <el-form-item label="">
             </el-form-item>
           </el-col>
           <el-col :span="18">
             <template>
               <el-table v-loading="loading" class="brandTable" :data="formAdd.goodsOrderInvoiceExtendEntityList" border style="width: 100%" key="view-table">
                 <el-table-column prop="vin" align="center" label="VIN码"></el-table-column>
                 <el-table-column prop="invoiceNo" align="center" label="发票号码">
                 </el-table-column>
                 <el-table-column align="center" label="发票照片">
                   <template slot-scope="scope">
                     <a :href="imgUrl + scope.row.invoiceImage" target="_blank" >{{ scope.row.invoiceImage.substr(scope.row.invoiceImage.length - 16) }}</a>
                   </template>
                 </el-table-column>
               </el-table>
             </template>
           </el-col>
         </el-row>
       </div>

     </el-form>
        <span slot="footer" class="dialog-footer" v-if="">
          <el-button @click="fileVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFormAdd">提 交</el-button>
        </span>
   </el-dialog>
  </div>
</template>

<script>
  import * as api from '@/api/order'
  import { Message } from 'element-ui'
  import pages from '../../components/page/page'
  import { mapState, mapActions } from 'vuex'
  import updateModal from './update/index'
  import { findMenu, findSubMenu, findBtn } from '@/utils/btn'

  var orderStatus = [
    'CUSTOMER_WAIT_FIRST_AUDIT', 'CUSTOMER_WAIT_FINAL_AUDIT', 'DEPOSIT_WAIT_PAY', 'DEPOSIT_WAIT_AUDIT', 'DEPOSIT_REJECT', 'BALANCE_WAIT_PAY',
    'BALANCE_WAIT_AUDIT', 'BALANCE_REJECT', 'BALANCE_PAID', 'FULL_WAIT_PAY', 'FULL_WAIT_AUDIT', 'FULL_REJECT', 'FULL_PAID', 'INVOICE_WAIT', 'INVOICE_WAIT_AUDIT',
    'INVOICE_REJECT', 'INVOICE_PASS', 'LICENSE_WAIT_UPLOAD', 'LICENSE_WAIT_AUDIT', 'LICENSE_REJECT', 'DELIVERY_WAIT', 'COMPLETED', 'CANCELED'
  ]
  var statusArr = [
    { value: 'CUSTOMER_WAIT_FIRST_AUDIT', name: '客户初审' },
    { value: 'CUSTOMER_WAIT_FINAL_AUDIT', name: '客户终审' },
    { value: 'DEPOSIT_WAIT_PAY', name: '待付定金' },
    { value: 'DEPOSIT_WAIT_AUDIT', name: '定金待审核' },
    { value: 'DEPOSIT_REJECT', name: '定金回执驳回' },
    { value: 'BALANCE_WAIT_PAY', name: '待付尾款' },
    { value: 'BALANCE_WAIT_AUDIT', name: '尾款待审核' },
    { value: 'BALANCE_REJECT', name: '尾款回执驳回' },
    { value: 'BALANCE_PAID', name: '尾款已付' },
    { value: 'FULL_WAIT_PAY', name: '待付全款' },
    { value: 'FULL_WAIT_AUDIT', name: '全款待审核' },
    { value: 'FULL_REJECT', name: '全款回执驳回' },
    { value: 'FULL_PAID', name: '全款已付' },
    { value: 'INVOICE_WAIT', name: '待开票' },
    { value: 'INVOICE_WAIT_AUDIT', name: '开票待审核' },
    { value: 'INVOICE_REJECT', name: '开票驳回' },
    { value: 'INVOICE_PASS', name: '开票通过' },
    { value: 'LICENSE_WAIT_UPLOAD', name: '待上牌' },
    { value: 'LICENSE_WAIT_AUDIT', name: '上牌信息待审核' },
    { value: 'LICENSE_REJECT', name: '上牌信息驳回' },
    { value: 'DELIVERY_WAIT', name: '待交付' },
    { value: 'COMPLETED', name: '已完成' },
    { value: 'CANCELED', name: '已取消' }
  ]
  export default {
    data() {
      return {
        showFileList: true,
        length: 40,
        fileList: [],
        tableIndex: 0,
        limit: 1,
        action: '/amdms/api/file/upload/',
        formData: [],
        formData1: [],
        updateTitle: '',
        updateShow: false,
        isUpdateModal: false,
        editVisible: false,
        fileVisible: false, // 归档资料
        updateMsg: {
          code: '0',
          companyType: '1'
        },
        lookMsg: {
        },
        loading: false,
        total: 0,
        page: {
          index: 1,
          size: 10
        },
        tableData: [],
        orderStatus: [],
        invoiceData: [],
        list: {
          brandName: '',
          saleName: '',
          brokerName: '',
          status: '',
          index: 1,
          size: 10
        },
        formAdd: { // 归档资料
          orderTotalNumber: 1,
          agentPayUrl: [],
          contractUrl: [],
          goodsOrderInvoiceExtendEntityList: [],
          vehicleConfirmationUrl: [],
          vehicleProcurementUrl: [],
          vinList: []
        },
        formAddData: {
          goodsOrderInvoiceExtendEntityList: [
            {
              invoiceNo: '',
              invoiceImage: '',
              vin: ''
            }
          ]
        },
        formQueryData: {},
        goodsOrderCustomerEntityList: [], // 客户信息
        goodsOrderCarValidateEntity:[],//验车人信息
        orderTotalNumber:'',
        commodityUnitPrice:'',
        //款项信息
        totalOrderPrice:'',
        commodityGuaranteeAmount:'',
        commodityDepositAmount:'',
        balanceAmount:'',
        commodityDepositImageList:'',
        balanceImageList:'',
        balanceImageList:'',
        //合同快递信息
        contractMailCode: '',
        contractBackCode: '',
        invoiceMailWay: '',
        invoiceMailCode: '',

        invoiceInfoList:[],
        datumMailWay:'',
        guaranteeAmountImageList:[],

        guaranteeAmountImageList:'',
        commodityGuaranteeAmount:'',
        guaranteeAmountReturnTime:[],
        customerType:'',//判断客户类型
        saleType: '',
        formEdit: {
          goodsOrderCustomerEntityList: {
            customerName: '',
            creditCode: '',
            bankOfDeposit: '',
            account: '',
            customerAddress: '',
            businessLicenceUrl: '',
            billingInformationUrl: ''
          },
          carInfoList: {
            brandName: '',
            extcolor: '',
            modelName: '',
            nercolor: '',
            vinCode: ''
          },
          orderId: '',
          saleType: '',
          orderTotalNumber: '',
          commodityUnitPrice: '',
          totalOrderPrice: '',
          contractMailCode: '',
          contractBackCode: '',
          commodityGuaranteeAmount: '',
          balanceAmount: '',
          commodityDepositAmount: '',
          commodityDepositImageList: [],
          balanceImageList: '',
          goodsOrderCarValidateEntity: {
            validDate: '',
            validCarName: '',
            phone: '',
            idCard: '',
            idCardFrontUrl: ''
          },
          cardsOnList: {
            vinCode: '',
            drivingUrl: '',
            registrationUrl: '',
            trafficInsurancePolicyUrl: ''
          },
          datumMailWay: '',
          datumMailCode: '',
          guaranteeAmountReturnTime: '',
          guaranteeAmountImageList: ''
        }
      }
    },
    watch: {
      isUpdateModal() {
        if (this.$refs.formModel) {
          this.$refs.formModel.clearValidate()
        }
      }
    },
    components: {
      pages,
      updateModal
    },
    created() {
      this.getStatus()
      if (this.$route.params.uuid) {
        this.list.id = this.$route.params.uuid
        this.queryList()
      } else {
        this.queryList()
      }
    },
    computed: {
      ...mapState({
        imgUrl: state => state.userInfo.url,
        cityOptions: state => state.selecteData.city,
        areaOptions: state => state.selecteData.area,
        brandOptions: state => state.selecteData.brandOptions,
        companyTypeOptions: state => state.selecteData.companyType,
        tokenImg: state => state.user.token
      })
    },
    methods: {
      ...mapActions({
        loginOut: 'FedLogOut'
      }),
      btnShow(name) {
        var menu = findMenu('销售管理')
        var subMenu = findSubMenu(menu.children, '订单管理')
        if (findBtn(subMenu.children, name)) {
          return true
        } else {
          return false
        }
      },
      // 获取订单状态
      getStatus() {
        var status = localStorage.getItem('orderStatus')
        if (status) {
          this.orderStatus = JSON.parse(status)
        } else {
          api.orderStatus().then((res) => {
            if (+res.code === 0) {
              this.orderStatus = res.data
              localStorage.setItem('orderStatus', JSON.stringify(res.data))
            }
          })
        }
      },
      clearArrVal(arr) {
        for (var Item in arr) {
          arr[Item] = ''
        }
      },
      handleClose(done) {
        this.isUpdateModal = false
        this.fileVisible = false
      },
      handleClose1(done) {
        this.editVisible = false
      },
      // 分页
      _pageChange(val, flag) {
        // this.clearArrVal(this.list)
        var arr = []
        if (flag === 'size') {
          this.list.index = val
          this.queryList()
        } else {
          arr.push(val)
          this.list.index = 1
          this.list.size = arr[0]
          this.queryList()
        }
      },
      // 搜索查询
      search() {
        this.queryList()
      },
      queryList() {
        this.loading = true
        var data = this.list
        api.orderList(data).then((res) => {
          if (+res.code === 0) {
            this.tableData = res.data.rows
            this.total = +res.data.total
            this.list.id = ''
          }
          this.loading = false
        }).catch(err => {
          this.loading = false
        })
      },
      // 查看--修改--归档资料
      material(row) {
        this.formAddData.goodsOrderInvoiceExtendEntityList[0].invoiceNo = ''
        this.fileVisible = true
        const orderId = { orderId: +row.id }
        this.formAddData.orderId = +row.id
        this.formQueryData.orderId = +row.id
        if (orderId) { // 过去信息
          api.lookArchival(orderId).then((res) => {
            this.formAdd = res.data
            // 改变数据格式
            this.invoiceData = res.data.vinList.map((item, index) => {
              var json = {
                vin: item,
                invoiceNo: '',
                invoiceImage: ''
              }
              return json
            })
            // 判断单张与多张发票
            if (this.formAdd.vinList.length > 1) {
              this.formAdd.orderTotalNumber = 2
            } else {
              this.formAdd.orderTotalNumber = 1
            }
          })
        }
      },
      // 保存提交归档资料
      submitFormAdd() {
        // 修改 查看
        this.formQueryData.contractUrl = this.formAddData.contractUrl = this.formAdd.contractUrl.length === 0 ? [{ id: '', url: '' }] : this.formAdd.contractUrl
        this.formQueryData.vehicleProcurementUrl = this.formAddData.vehicleProcurementUrl = this.formAdd.vehicleProcurementUrl.length === 0 ? [{ id: '', url: '' }] : this.formAdd.vehicleProcurementUrl
        this.formQueryData.vehicleConfirmationUrl = this.formAddData.vehicleConfirmationUrl = this.formAdd.vehicleConfirmationUrl.length === 0 ? [{ id: '', url: '' }] : this.formAdd.vehicleConfirmationUrl
        this.formQueryData.agentPayUrl = this.formAddData.agentPayUrl = this.formAdd.agentPayUrl.length === 0 ? [{ id: '', url: '' }] : this.formAdd.agentPayUrl
        // 多张发票，vin
        if (this.formAdd.vinList.length > 1) { // 多张 与 单张
          if (+this.formAdd.orderTotalNumber === 2) { // 多张
            this.formAddData.goodsOrderInvoiceExtendEntityList = this.invoiceData
            if (this.formAdd.goodsOrderInvoiceExtendEntityList.length === 0) { // 修改
              var count = 0
              for (var item of this.invoiceData) {
                if (item.invoiceNo !== '' && item.invoiceNo !== undefined) {
                  ++count
                }
              }
              if (count !== this.invoiceData.length && +0 !== count) {
                Message({
                  message: `发票号码不能为空`,
                  type: 'warning',
                  showClose: true
                })
                return
              }
              api.saveArchival(this.formAddData).then((res) => {
                if (+res.code === 0) {
                  this.fileVisible = false
                  this.queryList()
                }
              })
            } else { // 数据为不为空== （查看），处理发票号码及发票图片，VIN码 数据
              api.saveArchival(this.formQueryData).then((res) => {
                if (+res.code === 0) {
                  this.fileVisible = false
                  this.queryList()
                }
              })
            }
          } else { // 单张
            api.saveArchival(this.formAddData).then((res) => {
              if (+res.code === 0) {
                this.fileVisible = false
                this.queryList()
              }
            })
          }
        } else { // 1张图片
          // 数据为空(修改)，处理发票号码及发票图片，VIN码 数据
          if (this.formAdd.goodsOrderInvoiceExtendEntityList.length === 0) {
            api.saveArchival(this.formAddData).then((res) => {
              if (+res.code === 0) {
                this.fileVisible = false
                this.queryList()
              }
            })
          } else { // 查看
            api.saveArchival(this.formQueryData).then((res) => {
              if (+res.code === 0) {
                this.fileVisible = false
                this.queryList()
              }
            })
          }
        }
      },
      // 根据ID获取查看信息
      edit(row) {
        this.editVisible = true
        // this.formEdit = ''
        const orderId = row.id
        this.formEdit.orderId = row.id
        // console.log(this.goodsOrderCustomerEntityList)
        this.customerType = row.customerType
        this.saleType = row.saleType;
        api.lookOrder(orderId).then((res) => {
          if (+res.code === 0) {
            var rowData = res.data;
            this.goodsOrderCustomerEntityList = rowData.goodsOrderCustomerEntityList;//客户信息
            this.formData1 = rowData.carInfoList || '';//车辆信息
            this.formData = rowData.cardsOnList||'';//上牌信息
            this.orderTotalNumber = rowData.orderTotalNumber;
            this.invoiceMailCode = rowData.invoiceMailCode;
            this.goodsOrderCarValidateEntity = rowData.goodsOrderCarValidateEntity;
            this.commodityUnitPrice = rowData.commodityUnitPrice;
            this.totalOrderPrice = rowData.totalOrderPrice;
            this.commodityGuaranteeAmount = rowData.commodityGuaranteeAmount;
            this.commodityDepositAmount = rowData.commodityDepositAmount;
            this.balanceAmount = rowData.balanceAmount;
            this.commodityDepositImageList = rowData.commodityDepositImageList;
            this.balanceImageList = rowData.balanceImageList;
            this.contractMailCode = rowData.contractMailCode;
            this.contractBackCode = rowData.contractBackCode;
            //发票
            this.invoiceInfoList = rowData.invoiceInfoList;
            this.datumMailWay = rowData.datumMailWay;
            this.guaranteeAmountImageList = rowData.guaranteeAmountImageList;
            this.guaranteeAmountReturnTime = rowData.guaranteeAmountReturnTime;
          }
        })
      },
      // 打开修改弹窗
      openUpdateBox(row, flag) { //
        var status = row.status
        var saleType = row.saleType // 0为零售
        var customerType = row.customerType //
        this.updateMsg.id = row.id
        this.updateMsg.dialogVisible = true
        this.updateMsg.saleType = saleType
        this.updateMsg.customerType = customerType || ''
        this.updateMsg.code = this.changeOrderStatus(status)
        this.updateMsg.flag = flag || 'out'
      },
      formatterStatus(row) {
        var el = row.status
        var str = ''
        statusArr.map((item, index) => {
          if (el === item.value) {
            str = item.name
            return
          }
        })
        return str
      },
      // 转换状态值
      changeOrderStatus(val) {
        var str = ''
        orderStatus.forEach(function(item, index) {
          if (item === val) {
            str = index + 1
          }
        })
        return str
      },
      // 取消订单
      cancelOrder(index, orderId) {
        this.$confirm('您确定要取消该订单吗, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          api.cancelGoodsOrder(orderId).then((res) => {
            if (+res.code === 0) {
              this.$message({
              type: 'success',
              message: '取消订单成功'
            })
            this.queryList()
            }
          }).catch(err => {
            if (+err.code === 1005) {
              Message({
                message: '该订单状态已改变，请刷新订单列表',
                type: 'warning',
                duration: 2000
              })
            }
          })
        })
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 上传图片===================================================
      handleRemove(file, fileList) {
      },
      handleRemoveImg(ids, name) {
        var data = [{
          id: ids,
          url: ''
        }]
        this.formAdd[name] = data
      },
      handlePreview(file) {
      },
      // 修改上传图片成功====
      upFileSuccess1(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          if (this.formAdd.contractUrl.length === 0) {
            this.formAdd.contractUrl = [{
              id: '',
              url: res.data
            }]
          } else {
            this.formAdd.contractUrl[0].url = res.data
          }
        } else {
          this.showFileList = false
          this.$refs['upload1'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      upFileSuccess2(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          if (this.formAdd.vehicleProcurementUrl.length === 0) {
            this.formAdd.vehicleProcurementUrl = [{
              id: '',
              url: res.data
            }]
          } else {
            this.formAdd.vehicleProcurementUrl[0].url = res.data
          }
        } else {
          this.showFileList = false
          this.$refs['upload2'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: res.friendlyMsg,
              type: 'error',
              showClose: true
            })
          }
        }
      },
      upFileSuccess3(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          if (this.formAdd.vehicleConfirmationUrl.length === 0) {
            this.formAdd.vehicleConfirmationUrl = [{
              id: '',
              url: res.data
            }]
          } else {
            this.formAdd.vehicleConfirmationUrl[0].url = res.data
          }
        } else {
          this.showFileList = false
          this.$refs['upload3'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      upFileSuccess4(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          if (this.formAdd.agentPayUrl.length === 0) {
            this.formAdd.agentPayUrl = [{
              id: '',
              url: res.data
            }]
          } else {
            this.formAdd.agentPayUrl[0].url = res.data
          }
        } else {
          this.showFileList = false
          this.$refs['upload4'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      // 上传一张 图片成功
      upFileOneSuccess(res) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          this.formAddData.goodsOrderInvoiceExtendEntityList[0].invoiceImage = res.data
        } else {
          this.showFileList = false
          this.$refs['uploadOne'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请删除图片，重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      // 表格上传图片成功
      upFileMoreSuccess(res, file, fileList) {
        if (+res.code === 0) {
          Message({
            message: `图片上传成功`,
            type: 'success',
            showClose: true
          })
          this.invoiceData = this.invoiceData.map((item, index) => {
            var json = {
              vin: item.vin,
              invoiceNo: item.invoiceNo,
              invoiceImage: index === this.tableIndex ? res.data : item.invoiceNo
            }
            return json
          })
        } else {
          this.showFileList = false
          this.$refs['uploadMore'].clearFiles()
          if (+res.code === 101) {
            this.loginOut()
            this.$router.push({ path: '../login' })
          } else {
            Message({
              message: '图片上传失败,请删除图片，重新上传',
              type: 'error',
              showClose: true
            })
          }
        }
      },
      // 点击上传图片响应的事件
      submitUploadTable(index) {
        this.tableIndex = index
      },
      upFileError(err, file, fileList) {
        this.showFileList = false
        this.$refs['upload1'].clearFiles()
        this.$refs['upload2'].clearFiles()
        this.$refs['upload3'].clearFiles()
        this.$refs['upload4'].clearFiles()
        this.$refs['uploadOne'].clearFiles()
        this.$refs['uploadMore'].clearFiles()
        if (err) {
          Message({
            message: '图片上传失败',
            type: 'error',
            showClose: true
          })
        }
      },
      beforeUpload(file) {
        this.showFileList = true
        // if (!/(jpg|png)$/.test(file.name)) {
        //   this.$message({
        //     message: '图片格式不正确',
        //     type: 'warning',
        //     showClose: true
        //   })
        //   return false
        // }
        if (file.size / 1024 > 5120) {
          this.$message({
            message: '文件超过5M,请调整后重新上传',
            type: 'warning',
            showClose: true
          })
          return false
        }
      },
      orderExport() {
        var orderId = this.formEdit.orderId
        var aLink = document.createElement('a');
        aLink.href = api.infoExport + '?orderId=' + orderId;
        aLink.click()
      }
    }
  }
</script>
<style lang="scss">
  .itemNum {
    .el-form-item__label {
      line-height: 18px;
    }
  }
  .order {
    position: relative;
    padding: 20px;
    .tableEvent {
      text-align: right;
      margin-top: -58px;
    }
    .el-table {
      .el-table__body-wrapper {
        overflow-x: inherit;
      }
    }
    .modalCheckBox {
      .el-checkbox-group {
        line-height: 18px;
        margin-left: 20px;
        margin-top: -5px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .el-checkbox {
        margin-right: 20px;
      }
      .el-checkbox + .el-checkbox {
        margin-left: 0;
      }
    }
  }
</style>


